<template>
    <el-dialog width="35%" title="添加字典数据" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
      <!--form表单-->
      <el-form size="small" ref="form" :model="form" :rules="formRules" :label-width="formLabelWidth">
        <el-form-item label="字典类型" prop="dictType"><el-input :disabled="true" v-model="form.dictType" placeholder="请输入字典名称"></el-input></el-form-item>
        <el-form-item label="数据标签" prop="dictLabel"><el-input v-model="form.dictLabel" placeholder="请输入数据标签"></el-input></el-form-item>
        <el-form-item label="数据键值" prop="dictValue"><el-input v-model="form.dictValue" placeholder="请输入数据键值"></el-input></el-form-item>
        <el-form-item label="样式属性" prop="cssClass"><el-input v-model="form.cssClass" placeholder="请输入样式属性"></el-input></el-form-item>
        <el-form-item label="显示排序" prop="dictSort"><el-input type="number" v-model="form.dictSort" placeholder="请输入排序"></el-input></el-form-item>
        <el-form-item label="回显样式" prop="listClass">
            <el-select v-model="form.listClass">
            <el-option
              v-for="item in listClassOptions"
              :key="item.value"
              :label="item.label + '(' + item.value + ')'"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  
  </template>
  
  <script>
  import SysDictApi from '@/api/sysdict.js';
  export default {
    data() {
      return {
        /*左边长度*/
        formLabelWidth: '80px',
        /*是否显示*/
        loading: false,
        /*是否显示*/
        dialogVisible: false,
        /*form表单对象*/
        form: {
          dictLabel: '',
          dictType:'',
          status:'0',
          remark:'',
          listClass:"default",
          dictSort:1
        },
        listClassOptions: [
            {
            value: "default",
            label: "默认"
            },
            {
            value: "primary",
            label: "主要"
            },
            {
            value: "success",
            label: "成功"
            },
            {
            value: "info",
            label: "信息"
            },
            {
            value: "warning",
            label: "警告"
            },
            {
            value: "danger",
            label: "危险"
            }
        ],
        /*form验证*/
        formRules: {
          dictValue: [
            {
              required: true,
              message: ' ',
              trigger: 'blur'
            }
          ],
          dictLabel: [
            {
              required: true,
              message: ' ',
              trigger: 'blur'
            }
          ],
          status: [
            {
              required: true,
              message: ' ',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    props: ['open','dict_type'],
    watch: {
      open: function(n, o) {
        if (n != o) {
          this.dialogVisible = this.open;
          //this.form.dictType=this.dict_type
          this.form={
            dictLabel: '',
            dictType:this.dict_type,
            status:'0',
            remark:'',
            listClass:"default",
            dictSort:1
          }
        }
      }
    },
    created() {
      
    },
    methods: {
      /*添加*/
      onSubmit() {
        let self = this;
        self.$refs.form.validate(valid => {
          if(valid){
            self.loading = true;
            let params = Object.assign({},self.form);
            SysDictApi.addData(params, true)
              .then(data => {
                self.loading = false;
                self.$message({
                  message: '恭喜你，添加成功',
                  type: 'success'
                });
                self.dialogFormVisible(true);
              })
              .catch(error => {
                self.loading = false;
              });
          }
        })
      },
  
      /*关闭弹窗*/
      dialogFormVisible(e) {
        if (e) {
          this.$emit('close', {
            type: 'success',
            openDialog: false
          });
        } else {
          this.$emit('close', {
            type: 'error',
            openDialog: false
          });
        }
      }
    }
  };
  </script>
  
  <style></style>
  